<template>
    <div class="foot-container">

        <div class="author">
            <span class="copyright">©</span>
            校园二手交易市场
            <span class="version">v1.2.0</span>
        </div>
    </div>
</template>

<style scoped>
.foot-container {
    position: sticky;
    z-index: 1000;
    width: 100%;
    height: 50px; /* 增加高度容纳装饰元素 */
    background: linear-gradient(145deg, #fff3e6 20%, #ffffff 80%);
    border-top: 2px solid #ffd4b8;
    /* 新增布局优化 */
      display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 -4px 12px rgba(255,85,0,0.05);
}


/* 装饰图标容器 */
.decor-icons {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

/* 装饰图标样式 */
.decor-icon {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 4px rgba(255,85,0,0.1));
    transition: transform 0.3s ease;
}

.decor-icon:hover {
    transform: translateY(-3px);
}

.author {
    color: #ff7733;
    font-size: 16px;
    font-family: 'PingFang SC', sans-serif;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.copyright {
    font-size: 20px;
    margin-right: 4px;
}

.version {
    background: rgba(255,85,0,0.1);
    padding-left: 8px;
    border-radius: 20px;
    font-size: 12px;
    color: #ff5500;
}

/* 响应式调整 */
@media (max-width: 768px) {
    
    .decor-icons {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
}
</style>